{% extends "memory_base.html" %}
{% load i18n %}
{% block head %}
    <title>{% trans "欢迎来到忆存" %}</title>
    {{ block.super }}
    <style>
    *{
        font-family: "Microsoft YaHei", Arial, "Segoe UI", sans-serif;
    }

    .register-area{
        width: 20%;
        margin: 20px auto;
        background-color: white;
        background-image: url("{{ STATIC_URL }}memoryImage/background/login2.jpg");
        padding: 10px;
        color: black;
        border-radius: 10px;

    }

    </style>
{% endblock %}

{% block nav %}
<nav class="bk-horz-nav11">
    <div class="bk-nav-logo fl">
        <img src="https://magicbox.bk.tencent.com/static_api/v3/bk/images/logo1.png">
        {% trans '忆存' %}
    </div>
    <ul class="bk-nav-links fr">
        <li class="bk-has-submenu">
            <a href="javascript:void(0)">
                <span>{% trans "语⾔" %}</span>
            </a>
            <ul class="bk-submenu">
                <li>
                    <a href="javascript:">
                        简体中⽂
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        English
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</nav>
{% endblock %}


{% block content %}
    <div class="wenzi" style="text-align: center;margin-top: 150px;display: none;">
        <p style="font-size: 18px;font-weight: bold;">欢迎注册忆存</p>
    </div>
    <div class="register-area">
        <div class="title">
            <img src="{{ STATIC_URL }}memoryImage/background/bg1.png" style="height: 80px;margin-left: 110px;">
        </div>
        <form id="validate_form">
            <div class="bk-form register-form" id="validate_form">
                <div class="bk-form-item is-required">
                    <label class="control-label" for="username">昵称</label>
                    <input type="text" class="bk-form-input form-control" id="username" placeholder="用户名">
                </div>
                <div class="bk-form-item is-required">
                    <label class="control-label" for="firstPassword">密码</label>
                    <input type="password" class="form-control" id="firstPassword" placeholder="密码">
                </div>
                <div class="bk-form-item is-required">
                    <label class="control-label" for="checkPassword">确认密码</label>
                    <input type="password" class="form-control" id="checkPassword" placeholder="再次输入密码">

                </div>
            </div>
        </form>
        <div style="text-align: center">
            <button id="register" type="button" class="mybutton2" style="width: 80px;margin-top: 20px">注册</button>
        </div>
    </div>


    <div class="after-register" style="text-align: center;position: absolute;right: 750px;top: 400px;display: none;">
        <p style="font-size: 18px;font-weight: bold;">即刻开始我的忆存</p>
        <button id="login" type="button" class="mybutton1">
            开始忆存
        </button>
    </div>
{% endblock %}

{% block extra_block %}
<script>

    {#$('#validate_form').validate({#}
    {#    ignore: '.ignore',#}
    {#    errorElement: 'div', //错误信息的容器#}
    {#    errorClass: 'is-danger',#}
    {#    errorPlacement: function (error, element) {#}
    {#        error.addClass('bk-form-tip').insertAfter(element)#}
    {#    },#}
    {#    validClass: "bk-valid",#}
    {#    //验证规则#}
    {#    rules: {#}
    {#        username: {#}
    {#            required: true,#}
    {#        },#}
    {#        firstPassword: {#}
    {#            required: true,#}
    {#        },#}
    {#        checkPassword: {#}
    {#            required: true,#}
    {#        }#}
    {#    },#}
    {#    //错误提示信息#}
    {#    messages: {#}
    {#        username: "<p class='bk-tip-text'></p>  ",#}
    {#        firstPassword: "<p class='bk-tip-text'></p>  ",#}
    {#        checkPassword: "<p class='bk-tip-text'></p>  ",#}
    {#    }#}
    {# });#}


    $("#register").click(function () {
        username = $("#username").val();
        firstPassword = $("#firstPassword").val();
        checkPassword = $("#checkPassword").val();

        if ( username === "" ){
            new bkMessage({
                message: "请输入用户昵称",
                theme: 'error'
            });
            return false
        } else if (firstPassword !== checkPassword) {
            new bkMessage({
                message: '两次密码不一致',
                theme: 'error'
            });
            return false
        }
        $.ajax({
            type:'POST',
            url:"{{ SITE_URL }}memory_storage/registerNewUser/",
            data:{
                'username': username,
                'password': checkPassword,
                'csrfmiddlewaretoken': "{{ csrf_token }}"
            },
            dataType:"JSON",
            success: function(response){
                if ( response['result'] ){
                    new bkMessage({
                        message: response['message'],
                        theme: 'success'
                    });
                    $(".wenzi").fadeOut(500);
                    $(".register-area").fadeOut(500);
                    $(".after-register").fadeIn(3000);
                }else{
                    new bkMessage({
                        message: response['message'],
                        theme: 'error',
                        delay: 3000
                    });
                }
            },
            error: function() {
                alert("获取数据错误!");
            }
        })
    });

    $("#login").click(function () {
        window.location.href = "{{ SITE_URL }}memory_storage";
    });


    $(".wenzi").fadeIn(2000);


</script>
{% endblock %}

{% block footer %}{% endblock %}

